<template>
	<u-popup :show="show" @close="closePopup">
		<view class="products_view">
<!-- 			<u-sticky>
				<u-subsection :list="list" :current='currow' @change='setCurrow' activeColor="#ff5733"
					inactiveColor="#828282" bgColor="#f8f8f9" fontSize="24rpx"></u-subsection>
			</u-sticky> -->
			<scroll-view :scroll-y="true" @scrolltolower="loadPrimaryProducts" class="products_waterfall">
				<waterfall v-if="dataList.length" :dataList="dataList"></waterfall>
				<u-empty v-else iconSize="240" textSize="40" class="isempty" marginTop="200"></u-empty> 
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import waterfall from "components/waterfall/waterfall"
	import {
		// getOnSellProduct,
		getProductListByType
	} from "apis/farmer/goods.js"
	import {productStatus} from "utils/enums/product.js"
	import {productGrade} from "utils/enums/product"
	const productStateList = [
		{
			label: "在售",
			value: productStatus.onSell
		},
		{
			label: "预售",
			value: productStatus.preSell
		}
	]
	export default {
		data() {
			const list = productStateList.map(item => item.label)
			return {
				list,
				currow: 0, // 分段器索引
				dataList: [],
				pageNo: 1,
				pageSize: 20
			}
		},
		computed:{
			/* 当前获取商品的状态，在售或预售 */
			nowProductState(){
				const {currow} = this
				const list = productStateList.slice(currow,currow+1)
				return list[0].value
			}
		},
		components: {
			waterfall
		},
		/* 允许uview组件样式穿透 */
		options: {
			styleIsolation: 'shared'
		},
		name: "Products",
		props: ['show', 'levelId'],
		methods: {
			setCurrow(index) {
				this.currow = parseInt(index)
			},
			closePopup() {
				this.$emit("close")
			},

			async loadPrimaryProducts() {
				try {
					const {
						data,
						code,
						msg
					} = await getProductListByType(this.levelId, this.pageNo, this.pageSize)
					if (code !== 200) return this.$errorMsg(msg)
					this.dataList = [...this.dataList,...data['list']]
					this.pageNo++
				} catch (e) {
					this.$errorMsg(e)
				}

			},
			active() {
				uni.setNavigationBarTitle({
					title: this.levelId === productGrade.primary ? "初级农产品" : "加工农产品"
				})
				this.dataList = []
				this.pageNo = 1
				this.loadPrimaryProducts()
			}
		},
		watch: {
			show(newVal) {
				if (!newVal) return null;
				this.active()
			}
		}
	}
</script>

<style>
	.products_view {
		width: 100%;
		height: calc(100vh - 90rpx);
		background: #f5f5f5;
		transition: 1s;
		box-sizing: border-box;
		padding: 40rpx 5% 0 5%;
		overflow: auto;
	}

	.products_waterfall {
		width: 100%;
		height: calc(100vh - 90rpx);
		font-size: 28rpx;
	}

	/* 穿透uview的popup组件样式 */
	.u-safe-area-inset-bottom {
		padding-bottom: 0 !important;
	}
</style>
